<template>
	<view>
		<u-navbar title="历史提现" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" />
<!-- 		
		<view class="w-100" style="height: 20rpx;"></view>
		
		<view class="contentBox p-l-20 p-r-20 p-b-30 p-t-30 m-t-10 b-r-10  border-box bg-white flex align-center">
			<view class="flex-1 text-center">
				<view class="font-32">总收入</view>
				<view class="font-24 font-b">{{totalInfo.earningAmount || 0}}</view>
			</view>
			<view class="flex-1 text-center">
				<view class="font-32">总支出</view>
				<view class="font-24 font-b">{{totalInfo.expendAmount || 0}}</view>
			</view>
		</view> -->
        <view class="contentBox">
			<view class="padding-bottom-sm">
				<u-tabs :list="list" lineColor="#ECA52B" :itemStyle="{width: '33.3%', height: '88rpx'}" :activeStyle="{color: '#ECA52B'}" :inactiveStyle="{color: '#333333'}" :is-scroll="false" :current="current" @change="handelTab"></u-tabs>
			</view>
			<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow"  v-for="(item, index) in walletList" :key="index">
				<view class="flex justify-between font-30 text-bold">
					<view>{{item.incomeFlag ? '收入' : '支出'}}</view>
					<view>{{item.incomeFlag ? '+' : '-'}}{{item.amount}}</view>
				</view>
				<view class="font-26 margin-tb-sm">{{item.remark}}</view>
				<view class="flex justify-between font-26 text-gray">
					<view>{{item.createTime}}</view>
					<view>余额：{{item.afterAmount}}</view>
				</view>
			</view>
			<empty :show="walletList.length == 0" />
            <u-loadmore :status="status" color="#cccccc" class="padding-bottom padding-top-xs"/>
        </view>
	</view>
</template>

<script>
	import { walletFlow,walletFlowTotal } from '@/common/api/customer.js'
	export default {
		data() {
			return {
				current: 0,
				list: [{
					name: '全部',
				}, {
					name: '收入',
				}, {
					name: '支出',
				}],
				status: 'loading',
				pageNo: 0,
				incomeFlag: null,
				walletList: [],
				totalInfo:{}
			};
		},
		onShow() {
			this.getwalletFlow()
			this.getTotal()
		},
		onReachBottom() {
			this.getwalletFlow()
		},
		methods: {
			getTotal(){
				walletFlowTotal().then(res => {
					if(res.code === 200){
						this.totalInfo = res.data
					}
				})
			},
			getwalletFlow() {
				this.pageNo++
				this.status = 'loading'
				let params = {
					pageNo: this.pageNo,
					bizCode : 604,
					pageSize: 10
				}
				if(this.incomeFlag != null) {
					params.incomeFlag = this.incomeFlag
				}
				walletFlow(params, 3).then(res => {
					if(this.pageNo === 1){
						this.walletList = res.data
					}else{
						this.walletList = this.walletList.concat(res.data)
					}
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
			handelTab(e) {
				this.pageNo = 0
				this.walletList = []
				this.incomeFlag = null
				this.current = e.index
				if(this.current == 1) {
					this.incomeFlag = true
				}
				if(this.current == 2) {
					this.incomeFlag = false
				}
				this.getwalletFlow()
			}
		}
	}
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
page{
	background-color: #f2f2f2;
}
.contentBox{
	width: calc(100% - 40rpx);
	margin: 0 auto;
}
.boxBorder{
	border-top-left-radius: 50rpx;
	border-bottom-left-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	width: 160rpx;
	text-align: center;
}
.head {
	.copy-btn {
		border: 2rpx solid #808080;
		color: #808080;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
}
.level {
	background: linear-gradient(-90deg, #FF9701 0%, #FFB21F 100%);
	color: #ffffff;
	font-size: 24rpx;
	padding: 2rpx 20rpx;
	border-radius: 6rpx;
	margin-left: 20rpx;
	min-width: 96rpx;
	text-align: center;
}
.tab-item {
	width: 50%;
	height: 64rpx;
	box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
	color: #FA3121;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #FA3121;
	border-radius: 16rpx;
}
.tab-item-active {
	background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
	color: #ffffff;
	border: none !important;
}
.card-shadow {
	box-shadow: 0px 2px 8px 1px rgba(47,78,123,0.04);
}
</style>
